<template lang="">
  <div>
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>


    <div class="content" style="height: height;">
      <div v-for="(item,index) in this.totalsInfo" :key="index">
        <div v-if="item.num!=0" class="item">
          <div style="line-height: 45px; font-size: 20px; margin-left: 15px; position: relative;">
            <span>商铺id：</span>
            <span>{{item.sId1}}</span>
            <div v-if="item.ifBug == false" class="d1">等待结算</div>
            <div v-if="item.ifBug == true" class="d1">已送达</div>
          </div>
          <div style="line-height: 45px; font-size: 18px; margin-left: 15px;">
            <span>已购商品：</span>
            <span>{{item.name}}</span>
          </div>
          <div class="item_1">
            <div class="item_12">再来一单</div>
            <div class="item_11">评价</div>
          </div>

        </div>

      </div>
    </div>

    <TabBar :tabBars="tabBars"></TabBar>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  import TabBar from "@/components/TabBar.vue";
  import $ from "jquery"
  export default {
    data() {
      return {
        height: this.$height,
        left_show: false,
        left_name: '空',
        title_name: '订单',
        right_name: '',
        tabBars: [
          { className: "icon-changyonglogo40", title: "外卖", path: { name: 'Swiper' } },
          { className: "icon-faxian1", title: "搜索", path: { name: 'About' }, query: { latitude: localStorage.getItem("latitude"), longitude: localStorage.getItem("longitude") } },
          { className: "icon-weibiaoti-", title: "订单", path: { name: 'Menu' } },
          { className: "icon-wode", title: "我的", path: { name: "Mine" } },
        ],
        // arr: [],
      }
    },
    components: {
      Nav, TabBar
    },
    computed: {
      totalsInfo() {
        return this.$store.state.pri.totals;
      },
    },
    created() {
      const _this = this;
      $.ajax({
        url: "/api/find3Pros",
        type: "post",
        data: {
          uid: 1,
        },
        success: function (data) {
          console.log(data)
          _this.$store.commit('changeTotals', data);
        }
      })
    },

  }
</script>

<style lang="less" scoped>
  .content {
    margin-top: 44px;
    background-color: #f4f4f4;
  }

  .item {
    background-color: #fff;
    margin-top: 8px;
    padding: 10px;
  }

  .item_1 {
    overflow: hidden;
  }

  .item_11 {
    border: 1px solid #f4f4f4;
    padding: 10px 15px;
    border-radius: 10px;
    float: right;
    margin-right: 15px;
  }

  .item_12 {
    border: 1px solid #f4f4f4;
    padding: 10px 15px;
    border-radius: 10px;
    float: right;
  }

  .d1 {
    position: absolute;
    top: 5px;
    right: 20px;
    color: red;
    font-size: 15px;
  }
</style>